<template>
  <div class="dispatches">
    <header-bar title="请假"></header-bar>
    <div class="content-wrapper">
      <div class="content"  ref="scroll">
        <group class="form">
          <cell-box class="title-border">
              <div class="title">
                <div class="icon-wrapper">
                <icon name="document" :scale="2"></icon>
              </div>
              <span>基本信息</span>
              </div>
          </cell-box>
          <cell-box>
            <div class="icon-wrapper">
              <icon name="clock" :scale="3" class="icon-clock"></icon>
            </div>
            <div class="picker-wrapper" style="margin-left: 15px;">
              <p class="text">时间范围:</p>
              <span>{{form.datetime}}</span>
              <button @click="showDatetime" class="datetime-btn"><icon name="arrow" scale="2" class="icon-arrow"></icon></button>
              <p class="text">至:</p>
              <!-- <button class="datetime-btn" @click="showDatetime">{{form.datetime}}</button> -->
              <span>{{form.datetime}}</span>
              <button @click="showDatetime" class="datetime-btn"><icon name="arrow" scale="2" class="icon-arrow"></icon></button>
            </div>
          </cell-box>
          <cell-box>
            <div class="icon-wrapper">
              <icon name="serial-number" :scale="3"></icon>
            </div>
            <x-input placeholder="类型" v-model="form.number"></x-input>
            <icon name="addto" :scale="2.5"></icon>
          </cell-box>
          <cell-box>
             <div class="icon-wrapper">
              <icon name="contact" :scale="3"></icon>
            </div>
            <x-input placeholder="请假人" v-model="form.keyword"></x-input>
            <icon name="addto" :scale="2.5"></icon>
          </cell-box>
          <cell-box>
             <div class="icon-wrapper">
              <icon name="remarks" :scale="3"></icon>
            </div>
            <x-input placeholder="备注" v-model="form.remarks"></x-input>
          </cell-box>
        </group>      
      </div>
    </div>
     <div class="button">
        <x-button class="search-btn">确定</x-button>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import {
    Group,
    Cell,
    CellBox,
    XInput,
    XButton,
    Datetime,
    Popup,
    PopupPicker
  } from 'vux'
  import HeaderBar from '@/components/HeaderBar'

  export default {
    components: {
      Group,
      Cell,
      CellBox,      
      HeaderBar,
      XInput,
      XButton,
      Popup,
      PopupPicker
    },
    data(){
      return {
        form: {
          datetime: '2017-08-21',
          number: '',
          keywords: '',
          remarks: ''
        },
      }
    },
    methods: {
      _initScroll(){
        this.scroll = new BScroll(this.$refs.scroll)
      },
      showDatetime(){
        console.log(this.$vux)
        let _this = this
        this.$vux.datetime.show({
          cancelText: '取消',
          confirmText: '确定',
          format: 'YYYY-MM-DD',
          value: '2017-05-20 18',
          onConfirm (val) {
            console.log('plugin confirm', val)
            _this.form.datetime = val
          },
          onShow () {
            console.log('plugin show')
          },
          onHide () {
            console.log('plugin hide')
          }
        })
      },
      search(){
        console.log('fff')
        this.$router.push({
          name: 'dispatchSearchList'
        })
      }
    },
    mounted(){
      setTimeout(() => {
        this._initScroll()
      }, 20)
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';

  .dispatches{
    background-color: @color-background-main;
    .content-wrapper{
      position: absolute;
      top: 36px;
      bottom: 0;
      width: 100%;
      // margin-top: 0.1rem;
      .content{
        width: 100%;
        height: 100%;
        .form{
          .text{
            font-size: 14px;
            color: #9a9a9a;
          }
          .icon-arrow{
            // margin-left: 0.6rem;
          }
          .title-border{
            border-bottom: 1px solid #ccc;
            .title{
              display: flex;
              align-items: center;
              font-size: @font-size-normal;
              background-color: #fff;
              .icon-wrapper{
                display: flex;
                align-items: center;
                margin-right: 0.1rem;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                background-color: @color-theme-yellow-medium;
                .icon-clock{
                  margin-top: 0.1rem;
                }
              }
            }
          }
          .datetime-btn{
            font-size: 20px;
            outline: none;
            border: none;
            background-color: transparent;
            margin-left: 0.8rem;
          }
        }
        .search-btn{
          margin-top: 40px;
          margin-bottom: 20px;
        }       
      }
    }
    .child-view{
      position: fixed;
      width: 100%;
      height: 100%;
    }
    .button{
      width: 100%;
      position: absolute;
      bottom: 0;
      .search-btn{
        background: #ffba00;
        color: #fff;
        border: none;
        font-size: 20px;
      }
    }
  }
</style>